import React, { useState, useEffect } from "react";

import { SideBar, NavBar, SearchBar } from "antd-mobile";
import { useNavigate } from "react-router-dom";
// import classNames from "classnames";
import "../css/cate.css";
// import  medicines  from "../data/medicines";
import axios from "axios";

// 定义数据类型
export type Medicine = {
  id: string;
  name: string;
  price: number;
  description: string;
  image: string;
  category: string;
  brand: string;
  dosage: string;
  ingredients: string;
  sideEffects: string;
  storage: string;
  expiryDate: string;
};
export type Category = {
  label: string;
  value: string;
};
export default () => {
  const navigate = useNavigate();

  const [medicines, setMedicines] = useState<Medicine[]>([]);
  const getMedicines = async () => {
    const res = await axios.get("http://localhost:3000/medicines");
    setMedicines(res.data.medicines);
    console.log(res.data);
  };
  useEffect(() => {
    getMedicines();
  }, []);

  // 从药品数据中提取唯一分类
  const categories: Category[] = Array.from(
    new Set(medicines.map((medicine) => medicine.category))
  ).map((category) => ({
    label: category,
    value: category,
  }));
  console.log(categories);
  

  // 设置默认选中第一个分类
  const [activeKey, setActiveKey] = useState(categories[0]?.value || "常用药");

  // 过滤当前分类的药品
  const filteredMedicines = medicines.filter(
    (medicine) => medicine.category === activeKey
  );

  // 处理分类切换
  const handleCategoryChange = (key: string) => {
    setActiveKey(key);
  };

  const back = () => {
    navigate(-1);
  };

  return (
    <div style={{height:"calc(100vh - 64px)"}}>
      <NavBar back={null}><h3>分类</h3></NavBar>
      <div
        // className="qwe1"
        onClick={() => {
          navigate("/sear");
        }}
      >
        <SearchBar placeholder="请输入内容" />
      </div>
      <div className="container">
        <div className="side">
          <SideBar activeKey={activeKey} onChange={handleCategoryChange}>
            {categories.map((item) => (
              <SideBar.Item key={item.value} title={item.label} />
            ))}
          </SideBar>
        </div>
        <div className="main">
          <div className="category-title">{activeKey}</div>
          <div className="medicine-list">
            {filteredMedicines.map((medicine) => (
              <div
                key={medicine.id}
                className="medicine-item"
                onClick={() => navigate(`/detail/${medicine.id}`)}
              >
                <div className="medicine-left">
                  <img
                    src={medicine.image}
                    alt={medicine.name}
                    className="medicine-image"
                  />
                </div>
                <div className="medicine-right">
                  <div className="medicine-name">{medicine.name}</div>
                  <div className="medicine-brand">{medicine.brand}</div>
                  <div className="medicine-price">¥{medicine.price}</div>
                  {/* <div className="medicine-dosage">{medicine.dosage}</div> */}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};
